<!-- /**
 * 这是一个Vue组件的模板部分，用于定义组件的结构和布局。
 * 在Vue文件中，<template>标签用于编写HTML模板代码。
 * 在Login.vue文件中，<template>标签定义了登录页面的布局和结构。
 */ -->

<template> <!-- 这是Vue组件的模板部分，它包含了组件的HTML结构 -->
  <!-- 这是一个包含整个登录表单的容器 -->
  <div class="login-container"> 
    <!-- ref="loginForm" 这是一个引用（reference），可以用来在Vue组件中访问这个元素。 -->
    <!-- model="loginForm" 这是表单的数据模型，通常是一个包含表单所有字段值的对象。 -->
    <!-- rule="loginRules": 这是表单验证规则，用于定义每个字段的验证逻辑。 -->
    <el-form ref="loginForm" :model="loginForm" :rule="loginRules" class="login-form" auto-complete="on" label-position="lefr">
      <!-- 这是登录表单的标题。 -->
      <div class="titile-container">
        <h3 class="title">后台管理系统</h3>
      </div>

      <!-- 这是Element UI库中的表单项组件，用于包含一个表单字段。
        它的prop属性值应该与表单模型中的字段名相对应。 -->
      <el-form-item prop="username">
        <el-input
          ref="username"
          v-model="loginForm.username" 
          placeholder="用户名"
          name="username"
          type="text"
          tabindex="1"
          auto-compelete="on"
          prefix-icon="el-icon-user"
        />
        <!-- v-model="loginForm.username": 这是Vue的双向数据绑定语法，用于将输入框的值与表单模型中的username字段绑定。 -->
        <!-- tabindex属性用于指定元素在键盘导航时的顺序。 -->
        <!-- placeholder 是一个 HTML5 中新增的属性，主要用于描述输入字段预期值的简短的提示信息 -->

      </el-form-item>

      <el-form-item prop="password">
        <el-input
          :key="passwordType"
          ref="password"
          v-model="loginForm.password"
          :type="passwordType"
          placeholder="密码"
          name="password"
          tabindex="2"
          auto-compelete="on"
          @keyup.enter.native="handleLogin"
          prefix-icon="el-icon-help"
          show-password
        />
        <!-- @keyup.enter.native="handleLogin" 是 Vue.js 中的一个事件监听器。它的含义如下：

          @keyup.enter：这是一个键盘事件监听器，它会在用户按下并释放键盘上的 Enter 键时触发。
          .native：这是一个修饰符，它告诉 Vue.js 直接监听组件根元素的原生事件，而不是组件内部触发的自定义事件。
          "handleLogin"：这是一个方法名，当事件被触发时，这个方法会被调用。 -->
      </el-form-item>

      <el-buttom :loading="loading" type="primary" style="width:100%;margin-bottom:30rpx" @click.native.prevent="handleLogin">登录</el-buttom>
    </el-form>
  </div>
</template>


<!-- /**
 * 这个 <script> 标签用于定义 Login.vue 组件的逻辑部分。
 * 在这里可以编写处理登录逻辑、验证用户输入等功能的代码。
 */ -->

<script>
  import {Message} from 'element-ui'
  import Cookies from 'js-cookie'
  
  export default {
    name:'Login',
    data(){
      const validateUsername = (rule, value, callback) => {
        if(!value) {
          callback(new Error('请输入正确的用户名'))
        } else {
          callback()
        }
      }
      const validatePassword = (rule, value, callback) => {
        if(value.length > 6) {
          callback(new Error('密码不能少于6位'))
        } else {
          callback()
        }
      }
      return {
        loginForm: {
          username:'',
          password:''
        },
        loginRules: {
          username: [{required:true, trigger:'blur', validator:validateUsername}],
          password: [{required:true, trigger:'blur', validator:validatePassword}]
        },
        loading:false,
        passwordType:'password'
      }
    },
    methods: {
      // 它包含了 Vue 实例中所有的方法。
      handleLogin() {//方法，用于处理用户的登录操作。
        this.$refs.loginForm.validate(valid => {//调用了 loginForm 组件的 validate 方法来验证表单的输入。validate 方法接收一个回调函数作为参数，这个回调函数的参数 valid 是一个布尔值，表示验证是否通过。

          if (valid) {
            this.loading = true//开始加载。
            const data = {//这行代码创建了一个名为 data 的常量，它是一个对象，包含了用户名和密码。用户名使用了 trim 方法去除了前后的空格。
              username: this.loginForm.username.trim(), 
              password: this.loginForm.password 
            }

            //这行代码发送了一个 POST 请求到 'user/login' 路径，请求的数据是 data。然后，
            //它使用了 then 方法来处理服务器的响应。then 方法接收一个回调函数作为参数，这个回调函数的参数 res 是服务器的响应。
            this.$http.post('user/login', data).then(res => {

              //这行代码创建了一个名为 info 的常量，它是服务器响应的数据。
              const info = res.data

              if (info.code !== 20000) {
                //这行代码调用了 Message 函数来显示一个消息。消息的内容是 info.message，如果 info.message 不存在，则显示 'Error'。消息的类型是 'error'，持续时间是 5 秒。
                Message({
                  message: info.message || 'Error',
                  type: 'error',
                  duration: 5 * 1000
                })

                this.loading = false//表示加载结束。
              } else {

                //这行代码创建了一个名为 token 的常量，它是服务器响应数据中的 token。
                const token = info.data.token
                //这行代码创建了一个名为 TokenKey 的常量，它的值是 'test_token'。
                const TokenKey = 'test_token'
                //这行代码调用了 Cookies.set 方法来设置一个 cookie。cookie 的键是 TokenKey，值是 token
                Cookies.set(TokenKey,token)

                // 这行代码调用了 $router.push 方法来导航到 /Home 路径。
                this.$router.push('/Home')
                this.loading = false//加载结束。
              }
              }).catch(() => {this.loading = false})
          } else {
              console.log('error submit!!')
              return false
            }
        })
      }
    }
  }
</script>

<!-- /**
 * 这个 <style> 标签用于定义 Login.vue 组件的样式。
 */ -->

<style>
.login-form {
  position: relative;
  width: 520px;
  max-width: 100%;
  padding: 35px 50px 10px;
  margin: 0 auto;
  overflow: hidden;
  background: #283443;
  border-radius: 8px;
  opacity: 0.9;
}

.el-form-item {
  bottom: px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  color: #454545;
}

.login-container {
  min-height: 100%;
  width: 100%;
  background-color: #2d3a4b;
  overflow: hidden;
  background-image: url('../assets/bg.jpg');
  background-size: 100%;
  display: flex;
  align-items: center;
}

.title-container {
  position: relative;
}

.title {
  font-size: 26px;
  color: #eee;
  margin: 0px auto 40px auto;
  text-align: center;
  font-weight: bold;
}
</style>
